<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	String file = "test.xml";
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图表显示</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/xmlLoad.js"></script>
<script type="text/javascript" src="js/modules/exporting.js"></script>
<script type="text/javascript">
			var _data = xmlLoad("<%=file%>
	");
	var chart;
	var categories = new Array();
	var data1 = new Array();
	var data2 = new Array();
	var data3 = new Array();
	var data4 = new Array();
	for ( var i = 0; i < _data.length; i++) {
		categories.push(_data[i].month);
		var word = parseInt(_data[i].word_num);
		var pic = parseInt(_data[i].pic_num);
		var mix = parseInt(_data[i].mix_num);
		var retrans = parseInt(_data[i].re_trans);
		data1.push(word);
		data2.push(pic);
		data3.push(mix);
		data4.push(retrans);
	}
	$(document).ready(function() {
		chart = new Highcharts.Chart({
			chart : {
				renderTo : 'container',
				defaultSeriesType : 'column'
			},
			title : {
				text : '微博发表量统计'
			},
			subtitle : {
				text : '数据来源: switter.com'
			},
			xAxis : {
				categories : categories
			},
			yAxis : {
				min : 0,
				title : {
					text : '数量 (条)'
				}
			},
			legend : {
				layout : 'vertical',
				backgroundColor : '#FFFFFF',
				align : 'left',
				verticalAlign : 'top',
				x : 100,
				y : 70,
				floating : true,
				shadow : true
			},
			tooltip : {
				formatter : function() {
					return '' + this.x + ': ' + this.y + ' 条';
				}
			},
			plotOptions : {
				column : {
					pointPadding : 0.2,
					borderWidth : 0
				}
			},

			series : [ {
				name : '纯文字',
				data : data1
			}, {
				name : '只有图片',
				data : data2
			}, {
				name : '文字+图片',
				data : data3
			}, {
				name : '转发',
				data : data4
			} ]
		});
	});
</script>
</head>
<body>
	<div id="leftbar">
		<ul>
			<li></li>
		</ul>
	</div>
	<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>